<template>
	<view class="page" style="position: relative;">
		<!-- 导航栏 -->
		<view class="navbar">
			<view class="navbar-content">
				<view class="back-button" @click="goBack">
					<uni-icons type="back" size="30" color="#ffff"></uni-icons>
				</view>
				<text class="navbar-title">维修订单详情</text>
			</view>
		</view>
		
		<!-- 蓝色头部 -->
		<view class="header">
			
		</view>
		<view class="content-container">
			<!-- 核销码卡片 -->
		<view class="card">
			<text class="card-title">核销码: WE343235V</text>
			<view class="qr-container">
				<image class="qr-code" src="/static/二维码.png" mode="aspectFit"></image>
			</view>
		</view>
		
		<!-- 维修信息卡片 -->
		<view class="card">
			<text class="card-title">维修信息</text>
			<view class="info-list">
				<view class="info-item">
					<text class="info-label">维修单号：</text>
					<text class="info-value">3535252</text>
				</view>
				<view class="info-item">
					<text class="info-label">维修状态：</text>
					<text class="info-value">进行中</text>
				</view>
				<view class="info-item">
					<text class="info-label">车主姓名：</text>
					<text class="info-value">张</text>
				</view>
				<view class="info-item">
					<text class="info-label">联系方式：</text>
					<text class="info-value">1993829282</text>
				</view>
				<view class="info-item">
					<text class="info-label">维修方式：</text>
					<text class="info-value">上门取车</text>
				</view>
				<view class="info-item">
					<text class="info-label">取车位置：</text>
					<text class="info-value">山阳区32号</text>
				</view>
				<view class="info-item">
					<text class="info-label">预约日期：</text>
					<text class="info-value">2022/11/10 11:00</text>
				</view>
				<view class="info-item">
					<text class="info-label">提交日期：</text>
					<text class="info-value">2022/11/08 12:34</text>
				</view>
			</view>
		</view>
		
		<!-- 车辆信息卡片 -->
		<view class="card">
			<text class="card-title">车辆信息</text>
			<view class="vehicle-info">
				<view class="info-item">
					<text class="info-label">车辆类型：</text>
					<text class="info-value">大客车</text>
				</view>
				<view class="info-item">
					<text class="info-label">车牌号：</text>
					<text class="info-value">豫J45323</text>
				</view>
				<view class="info-item">
					<text class="info-label">整车照片：</text>
					<view class="photo-container">
						<image class="vehicle-photo" src="/static/车.jpg" mode="aspectFit"></image>
					</view>
				</view>
				<view class="info-item">
					<text class="info-label">维修部位照片：</text>
					<view class="repair-photos">
						<image class="repair-photo" src="/static/车.jpg" mode="aspectFit"></image>
						<image class="repair-photo" src="/static/车.jpg" mode="aspectFit"></image>
						<image class="repair-photo" src="/static/车.jpg" mode="aspectFit"></image>
					</view>
				</view>
			</view>
			<!-- 取消订单按钮 -->
			
		</view>
		<view class="cancel-button" @click="cancelOrder">
			<text class="cancel-text">取消订单</text>
		</view>
	</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				
			}
		},
		methods: {
			goBack() {
				uni.navigateBack();
			},
			cancelOrder() {
				uni.showModal({
					title: '确认取消',
					content: '确定要取消此维修订单吗？',
					success: (res) => {
						if (res.confirm) {
							console.log('用户确认取消订单');
							// 这里可以添加取消订单的逻辑
						}
					}
				});
			}
		}
	}
</script>

<style>
	.page {
		background-color: #f5f6fa;
		min-height: 100vh;
		padding-bottom: 40rpx;
	}
	
	/* 导航栏 */
	.navbar {
		width: 100%;
		height: 88rpx;
		background: linear-gradient(120deg, #1f78ff 0%, #2f89ff 100%);
		display: flex;
		align-items: center;
		justify-content: center;
	}
	
	.navbar-content {
		width: 100%;
		height: 100%;
		display: flex;
		align-items: center;
		position: relative;
		padding: 0 24rpx;
	}
	
	.back-button {
		position: absolute;
		left: 24rpx;
		width: 60rpx;
		height: 60rpx;
		display: flex;
		align-items: center;
		justify-content: center;
	}
	
	.navbar-title {
		color: #ffffff;
		font-size: 32rpx;
		font-weight: 600;
		text-align: center;
		width: 100%;
	}
	
	/* 蓝色头部 */
	.header {
		background: linear-gradient(120deg, #1f78ff 0%, #2f89ff 100%);
		padding: 60rpx 24rpx 40rpx 24rpx;
		text-align: center;
		height: 100rpx;
	}
	
	/* 内容容器 */
	.content-container {
		position: absolute;
		top: 100rpx;
		left: 50%;
		transform: translateX(-50%);
		width: 95%;
		max-width: 700rpx;
	}
	
	.header-title {
		color: #ffffff;
		font-size: 36rpx;
		font-weight: 600;
	}
	
	/* 卡片样式 */
	.card {
		background: #ffffff;
		border-radius: 16rpx;
		padding: 32rpx;
		margin-bottom: 24rpx;
		box-shadow: 0 8rpx 24rpx rgba(0,0,0,0.06);
	}
	
	.card-title {
		color: #333333;
		font-size: 32rpx;
		font-weight: 600;
		margin-bottom: 24rpx;
		display: block;
	}
	
	/* 核销码样式 */
	.card-title {
		text-align: center;
	}
	
	.qr-container {
		display: flex;
		justify-content: center;
		margin-top: 20rpx;
	}
	
	.qr-code {
		width: 300rpx;
		height: 300rpx;
	}
	
	/* 信息列表样式 */
	.info-list {
		display: flex;
		flex-direction: column;
		gap: 16rpx;
	}
	
	.info-item {
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		min-height: 40rpx;
	}
	
	.info-label {
		color: #666666;
		font-size: 28rpx;
		text-align: left;
	}
	
	.info-value {
		color: #333333;
		font-size: 28rpx;
		text-align: right;
	}
	
	/* 车辆信息样式 */
	.vehicle-info {
		display: flex;
		flex-direction: column;
		gap: 16rpx;
	}
	
	.vehicle-info .info-item {
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		min-height: 40rpx;
	}
	
	.vehicle-info .info-label {
		color: #666666;
		font-size: 28rpx;
		text-align: left;
	}
	
	.vehicle-info .info-value {
		color: #333333;
		font-size: 28rpx;
		text-align: right;
	}
	
	.photo-container {
		margin-top: 8rpx;
	}
	
	.vehicle-photo {
		width: 200rpx;
		height: 150rpx;
		border-radius: 8rpx;
	}
	
	.repair-photos {
		display: flex;
		flex-direction: row;
		gap: 16rpx;
		margin-top: 8rpx;
	}
	
	.repair-photo {
		width: 120rpx;
		height: 90rpx;
		border-radius: 8rpx;
	}
	
	/* 取消订单按钮 */
	.cancel-button {
		background: #1f78ff;
		border-radius: 40rpx;
		padding: 16rpx 32rpx;
		width: 25%;
		margin-left: 60%;
		margin-bottom: 30rpx;
		text-align: center;
		align-self: flex-end;
		margin-top: 24rpx;
	}
	
	.cancel-text {
		color: #ffffff;
		font-size: 28rpx;
		font-weight: 600;
	}
</style>
